<template>
	<view class="pageview">
		<cl-navbar :title="$t('my_file.setting.info.title')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view>
			<view class="cellviewGrop" @click="editInfo('avatar_url','image',$t('my_file.setting.info.image'))">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.info.image')}}</text>
					</view>
					<view class="cellview__right">
						<cl-avatar :src="user_info.avatar_url" size="100rpx"></cl-avatar>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="editInfo('nick_name','input',$t('my_file.setting.info.nickname'))">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.info.nickname')}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{user_info.nick_name}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="editInfo('sex','radio',$t('my_file.setting.info.sex'),sexData)">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.info.sex')}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{user_info.sex}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.info.login_name')}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{user_info.login_name}}</text>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="editInfo('sign_remark','textarea',$t('my_file.setting.info.signRemark'))">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('my_file.setting.info.signRemark')}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{user_info.sign_remark}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view>
			<cl-edit-pop ref="clEditPop" :title="editInfoData.title" @complete="popComplete" @cancel="popCancel">
				<view style="padding:30rpx;" >
					<u-input
						v-if="editInfoData.type=='input'"
						:customStyle="{backgroundColor:'#1E1F30',height:'110rpx',padding:'0 30rpx',borderRadius: '20rpx'}"
						fontSize="28rpx"
						color="#ffffff"
						focus
						:adjustPosition="false"
					    border="none"
						v-model="editInfoData.data[editInfoData.model]"
					  ></u-input>
					 <u-textarea v-model="editInfoData.data[editInfoData.model]" border="none" :customStyle="{backgroundColor:'#1E1F30'}" focus :adjustPosition="false" v-if="editInfoData.type=='textarea'"></u-textarea>
					 <view class="cellviewGrop" style="margin: 0 0 20rpx;" v-for="(item,index) in editInfoData.configData" :key="index" @click="setConfig(item.key)" v-if="editInfoData.type=='radio'">
					 	<view class="cellview" >
					 		<view class="cellview__left">
					 			<text class="cellview__left__title">{{item.name}}</text>
					 		</view>
					 		<view class="cellview__right">
					 			<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;" v-if="editInfoData.data[editInfoData.model] == item.key"></image>
					 			<image src="/static/icon/no-select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else></image>
					 		</view>
					 	</view>
					 </view>
				</view>
			</cl-edit-pop>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import upload from '@/common/upload/upload.js'
	import userApi from "@/services/api/user.js"
	export default {
		name: 'my_setting_info',
		data() {
			return {
				sexData:[
					{
						name:this.$t('my_file.setting.info.male'),
						key:'男'
					},{
						name:this.$t('my_file.setting.info.female'),
						key:'女'
					},{
						name:this.$t('my_file.setting.info.confidentiality'),
						key:'保密'
					}
				],
				editInfoData:{
					type:'',
					title:'',
					model:'',
					data:{},
					configData:{},
				}
			}
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			})
		},
		onLoad() {
			
		},
		onShow() {
			this.locale = uni.getLocale()
		},
		methods: {
			editInfo(type,inputType,title,configData){
				let infodata = JSON.parse(JSON.stringify(this.user_info))
				let { avatar_url,nick_name,sex,sign_remark } = infodata
				this.editInfoData = {
					type:inputType,
					title:title,
					model:type,
					data:{ avatar_url,nick_name,sex,sign_remark },
					configData
				}
				if(type=='avatar_url'){
					uni.chooseImage({
						count:1,
						sourceType:['album'],
						crop: { //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
							width: 500,
							height: 500
						},
						success: async(res) => {
						   let loadSrc = res.tempFilePaths[0];
						   try {
								let res = await upload.uploadFile(loadSrc, 'avatar', 'image')
								this.editInfoData.data.avatar_url = res.url
								this.apiUpdate()
						   } catch (e) {
						   }
						}
					})
				}else{
					this.$nextTick(()=>{
						this.$refs.clEditPop.show()
					})
				}
			},
			setConfig(key){
				this.editInfoData.data[this.editInfoData.model] = key
			},
			//编辑确认
			popComplete(){
				this.apiUpdate()
			},
			//编辑取消
			popCancel(){
				this.editInfoData = {
					type:'',
					title:'',
					model:'',
					data:{}
				}
			},
			async apiUpdate(){
				try{
					let apires = await userApi.userEdit(this.editInfoData.data)
					console.log(apires);
					if(apires){
						this.$refs.clEditPop.cancel()
					}
				}catch(e){
					//TODO handle the exception
				}
				
			},
			confirm(e){
				console.log(e);
			}
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
	
		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;
			min-height: 110rpx;
			box-sizing: border-box;
	
			&__left {
				display: flex;
				align-items: center;
	
	
				&__title {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
			&__right{
				display: flex;
				align-items: center;
				&__content{
					font-size: 28rpx;
					color: #61626e;
					word-break: break-all;
					max-width: 450rpx;
				}
			}
		}
	}
</style>